import Image from "next/image";
import Link from "next/link";

interface LogoProps {
  variant?: "default" | "mobile" | "glass";
}

function GlassLogo() {
  return (
    <Image
      src="/images/new-landing/inbox-zero-glass.png"
      alt="Logo"
      width={142}
      height={19}
    />
  );
}

function DefaultLogo() {
  return (
    <svg
      width="142"
      height="19"
      viewBox="0 0 142 19"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-labelledby="logo-title-default"
    >
      <title id="logo-title-default">Inbox Zero logo</title>
      <path
        d="M21.8418 4.13721C25.6847 4.13744 28.7996 7.25257 28.7998 11.0952C28.7998 14.9381 25.6848 18.054 21.8418 18.0542C19.5836 18.0542 17.577 16.9778 16.3057 15.311C15.7686 16.2428 14.9143 16.9635 13.8828 17.3267C13.2426 17.552 12.465 17.58 11.0605 17.5835L10.4189 17.5845H0V11.8569C0 9.31508 -0.000569727 8.04363 0.494141 7.07276C0.929304 6.21884 1.62453 5.52447 2.47852 5.08936C3.44934 4.59495 4.72035 4.59522 7.26172 4.59522H11.0605C12.465 4.59874 13.2426 4.62768 13.8828 4.85303C14.9166 5.21707 15.7727 5.93973 16.3096 6.87452C17.5811 5.21088 19.5861 4.13721 21.8418 4.13721ZM21.8418 6.24464C19.1626 6.24464 16.9905 8.41622 16.9902 11.0952C16.9902 13.7744 19.1624 15.9468 21.8418 15.9468C24.521 15.9466 26.6924 13.7743 26.6924 11.0952C26.6921 8.41636 24.5208 6.24486 21.8418 6.24464ZM10.5801 12.2905C9.40896 13.4614 7.51001 13.4614 6.33887 12.2905L2.29199 8.24366C2.24387 8.4065 2.19442 8.65208 2.16211 9.04737C2.10892 9.69847 2.10742 10.5513 2.10742 11.8569V15.4771H10.4189C12.4172 15.4771 12.8763 15.4471 13.1826 15.3394C13.8775 15.0947 14.4243 14.5479 14.6689 13.853C14.7767 13.5467 14.8066 13.0874 14.8066 11.0894C14.8066 9.09217 14.7766 8.63294 14.6689 8.32667C14.6582 8.29612 14.6457 8.26581 14.6338 8.23585L10.5801 12.2905ZM7.26172 6.70264C5.95618 6.70264 5.10323 6.70414 4.45215 6.75733C4.2018 6.7778 4.01172 6.80663 3.86426 6.83546L7.8291 10.8003C8.17728 11.1483 8.74169 11.1484 9.08984 10.8003L13.0801 6.80909C12.7637 6.72661 12.2086 6.70264 10.4189 6.70264H7.26172Z"
        fill="url(#paint0_linear_265_1083)"
      />
      <path
        d="M35.1791 3.9432C34.0383 3.9432 33.1455 3.1 33.1455 1.984C33.1455 0.843204 34.0383 3.26767e-06 35.1791 3.26767e-06C36.3199 3.26767e-06 37.2127 0.843204 37.2127 1.984C37.2127 3.1 36.3199 3.9432 35.1791 3.9432ZM33.4183 18.0544V5.3072H36.9399V18.0544H33.4183ZM46.1719 5.1584C48.9247 5.1584 51.2807 6.6216 51.2807 10.9864V18.0544H47.7839V11.3336C47.7839 9.176 46.9655 8.0352 45.2047 8.0352C43.3943 8.0352 42.3527 9.3248 42.3527 11.532V18.0544H38.8559V5.3072H41.9063L42.2287 6.8944C43.0471 5.9024 44.2127 5.1584 46.1719 5.1584ZM60.3289 5.1584C63.7513 5.1584 66.2313 7.6136 66.2313 11.656C66.2313 15.5992 63.7513 18.2032 60.3041 18.2032C58.4689 18.2032 57.2041 17.4096 56.3857 16.3184L56.0385 18.0544H52.9881V0.694403H56.4849V6.9192C57.3281 5.9024 58.5681 5.1584 60.3289 5.1584ZM59.5353 15.3512C61.4449 15.3512 62.6849 13.8632 62.6849 11.6808C62.6849 9.4984 61.4449 8.0104 59.5353 8.0104C57.6257 8.0104 56.4353 9.4984 56.4353 11.656C56.4353 13.8384 57.6257 15.3512 59.5353 15.3512ZM73.902 18.2032C69.8348 18.2032 67.1812 15.5992 67.1812 11.6808C67.1812 7.7624 69.8348 5.1584 73.902 5.1584C77.9692 5.1584 80.6228 7.7624 80.6228 11.6808C80.6228 15.624 77.9692 18.2032 73.902 18.2032ZM73.902 15.3512C75.8612 15.3512 77.0764 13.8384 77.0764 11.6808C77.0764 9.5232 75.8612 8.0104 73.902 8.0104C71.9428 8.0104 70.7524 9.5232 70.7524 11.6808C70.7524 13.8384 71.9428 15.3512 73.902 15.3512ZM80.108 18.0544L84.8448 11.5568L80.3312 5.3072H84.324L86.9528 9.0768L89.656 5.3072H93.4256L88.9368 11.5568L93.6736 18.0544H89.6808L86.7544 14.0616L83.8528 18.0544H80.108ZM93.9226 8.2584V5.3072H104.711V7.688L98.337 15.1032H105.008V18.0544H93.625V15.6736L99.9986 8.2584H93.9226ZM112.11 18.2032C107.869 18.2032 105.315 15.6488 105.315 11.7056C105.315 7.7376 107.919 5.1584 111.862 5.1584C115.681 5.1584 118.261 7.5392 118.31 11.284C118.31 11.656 118.285 12.0776 118.211 12.4744H108.961V12.648C109.035 14.4584 110.201 15.5496 111.961 15.5496C113.375 15.5496 114.367 14.9296 114.665 13.7392H118.112C117.715 16.2192 115.508 18.2032 112.11 18.2032ZM109.035 10.1928H114.789C114.541 8.6304 113.474 7.7624 111.887 7.7624C110.374 7.7624 109.233 8.68 109.035 10.1928ZM126.892 5.3072H127.488V8.4816H126.099C124.016 8.4816 123.222 9.8704 123.222 11.8048V18.0544H119.725V5.3072H122.9L123.222 7.2168C123.916 6.076 124.908 5.3072 126.892 5.3072ZM134.367 18.2032C130.299 18.2032 127.646 15.5992 127.646 11.6808C127.646 7.7624 130.299 5.1584 134.367 5.1584C138.434 5.1584 141.087 7.7624 141.087 11.6808C141.087 15.624 138.434 18.2032 134.367 18.2032ZM134.367 15.3512C136.326 15.3512 137.541 13.8384 137.541 11.6808C137.541 9.5232 136.326 8.0104 134.367 8.0104C132.407 8.0104 131.217 9.5232 131.217 11.6808C131.217 13.8384 132.407 15.3512 134.367 15.3512Z"
        fill="#242424"
      />
      <defs>
        <linearGradient
          id="paint0_linear_265_1083"
          x1="14.4"
          y1="4.13721"
          x2="14.4"
          y2="18.0544"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#2563EB" />
          <stop offset="1" stopColor="#6595FF" />
        </linearGradient>
      </defs>
    </svg>
  );
}

function MobileLogo() {
  return (
    <svg
      width="98"
      height="17"
      viewBox="0 0 98 17"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-labelledby="logo-title-mobile"
    >
      <title id="logo-title-mobile">Inbox Zero logo</title>
      <path
        d="M3.02988 3.498C2.01788 3.498 1.22588 2.75 1.22588 1.76C1.22588 0.747999 2.01788 -2.14577e-06 3.02988 -2.14577e-06C4.04188 -2.14577e-06 4.83388 0.747999 4.83388 1.76C4.83388 2.75 4.04188 3.498 3.02988 3.498ZM1.46788 16.016V4.708H4.59188V16.016H1.46788ZM12.7816 4.576C15.2236 4.576 17.3136 5.874 17.3136 9.746V16.016H14.2116V10.054C14.2116 8.14 13.4856 7.128 11.9236 7.128C10.3176 7.128 9.39355 8.272 9.39355 10.23V16.016H6.29155V4.708H8.99755L9.28355 6.116C10.0096 5.236 11.0436 4.576 12.7816 4.576ZM25.3401 4.576C28.3761 4.576 30.5761 6.754 30.5761 10.34C30.5761 13.838 28.3761 16.148 25.3181 16.148C23.6901 16.148 22.5681 15.444 21.8421 14.476L21.5341 16.016H18.8281V0.615998H21.9301V6.138C22.6781 5.236 23.7781 4.576 25.3401 4.576ZM24.6361 13.618C26.3301 13.618 27.4301 12.298 27.4301 10.362C27.4301 8.426 26.3301 7.106 24.6361 7.106C22.9421 7.106 21.8861 8.426 21.8861 10.34C21.8861 12.276 22.9421 13.618 24.6361 13.618ZM37.3808 16.148C33.7728 16.148 31.4188 13.838 31.4188 10.362C31.4188 6.886 33.7728 4.576 37.3808 4.576C40.9888 4.576 43.3428 6.886 43.3428 10.362C43.3428 13.86 40.9888 16.148 37.3808 16.148ZM37.3808 13.618C39.1188 13.618 40.1968 12.276 40.1968 10.362C40.1968 8.448 39.1188 7.106 37.3808 7.106C35.6428 7.106 34.5868 8.448 34.5868 10.362C34.5868 12.276 35.6428 13.618 37.3808 13.618ZM42.8861 16.016L47.0881 10.252L43.0841 4.708H46.6261L48.9581 8.052L51.3561 4.708H54.7001L50.7181 10.252L54.9201 16.016H51.3781L48.7821 12.474L46.2081 16.016H42.8861ZM55.141 7.326V4.708H64.711V6.82L59.057 13.398H64.975V16.016H54.877V13.904L60.531 7.326H55.141ZM71.2753 16.148C67.5133 16.148 65.2473 13.882 65.2473 10.384C65.2473 6.864 67.5573 4.576 71.0553 4.576C74.4433 4.576 76.7313 6.688 76.7753 10.01C76.7753 10.34 76.7533 10.714 76.6873 11.066H68.4813V11.22C68.5473 12.826 69.5813 13.794 71.1433 13.794C72.3973 13.794 73.2773 13.244 73.5413 12.188H76.5993C76.2473 14.388 74.2893 16.148 71.2753 16.148ZM68.5473 9.042H73.6513C73.4313 7.656 72.4853 6.886 71.0773 6.886C69.7353 6.886 68.7233 7.7 68.5473 9.042ZM84.3885 4.708H84.9165V7.524H83.6845C81.8365 7.524 81.1325 8.756 81.1325 10.472V16.016H78.0305V4.708H80.8465L81.1325 6.402C81.7485 5.39 82.6285 4.708 84.3885 4.708ZM91.0187 16.148C87.4107 16.148 85.0567 13.838 85.0567 10.362C85.0567 6.886 87.4107 4.576 91.0187 4.576C94.6267 4.576 96.9807 6.886 96.9807 10.362C96.9807 13.86 94.6267 16.148 91.0187 16.148ZM91.0187 13.618C92.7567 13.618 93.8347 12.276 93.8347 10.362C93.8347 8.448 92.7567 7.106 91.0187 7.106C89.2807 7.106 88.2247 8.448 88.2247 10.362C88.2247 12.276 89.2807 13.618 91.0187 13.618Z"
        fill="#242424"
      />
    </svg>
  );
}

export function Logo({ variant = "default" }: LogoProps) {
  return (
    <Link href="/">
      {variant === "default" ? (
        <DefaultLogo />
      ) : variant === "mobile" ? (
        <MobileLogo />
      ) : (
        <GlassLogo />
      )}
    </Link>
  );
}
